iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Mobile Development

卡卡30天學 React Native系列 第 19

[ 卡卡 DAY 19 ] - React Native 用 react-native-webview 實現 webview 跟 html render

  • 分享至 

  • xImage
  •  

在 App 需求中
若頁面需要通過 URL 渲染遠端 HTML 頁面
若頁面資料提供的是 html 字串
在 React Native 該怎麼做呢?
開始來用 react-native-webview 吧!

原本 WebView 是原生的,後來為了減小 React Native 核心包的體積,便將其單獨提出到 react-native-webview

開始安裝

npm i react-native-webview
cd ios
pod install

實作 webview

  1. create component for webview, components/ 建立 WebViewComponent.js 引入套件
import { WebView } from 'react-native-webview';
  1. 建立 pure component 讀取 props
const WebViewComponent = props => {
  return <WebView source={{uri: props.source}} />;
};

export default WebViewComponent;
  1. 在 screens/ 建立一個 WebViewScreen.js 的頁面 source 放入網址

這裡有個關鍵要注意!!
WebView 預設的高度是 0,所以若外層沒給予高度無法顯示畫面
所以須於外層包一個元件
View / ScrollView / SafeAreaView
並且給予 style={{flex:1}} 佔全滿畫面

import React from 'react';
import WebViewComponent from '../components/WebViewComponent';
import {View} from 'react-native';
const WebViewScreen = () => {
  return (
    <View style={{flex: 1}}> //注意!!
      <WebViewComponent source="https://paradisemrch.github.io/beka/" />
    </View>
  );
};
export default WebViewScreen;

  1. 下指令
npm run ios

塔羅卡卡

btw 要算塔羅可以找卡卡唷!塔羅卡卡 <3 歡迎預約 /images/emoticon/emoticon30.gif


實作 html render

props

  • originWhitelist - 如果用戶點擊導航到新頁面但新頁面不在此白名單中,則該 URL 將由操作系統處理。
    default 的白名單是 “http:// ” 和 “https:// ”
    我們可以自己設定
    像是 originWhitelist = { [ ' https:/ /* ' , ' git://* ' ] } />
    也或著 originWhitelist={["*"]}

  • source 換為 html

  • injectedJavaScript 在加載時注入網頁的 js,window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight) 用來偵測內容高度

  • onMessage webview 調用時調用的函數

深入 props 可以參考此 doc

  1. 於 source 直接放入 html 檔案
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    這個是個關鍵!!!才可以讀取 html style
<WebView
    originWhitelist={["*"]}
    source={{
        html:
        `<html>
            <head>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            <body>
              <p>這裡是一個標題</p>
            </body>
        </html>`,
    }}
     injectedJavaScript="window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight)"
    onMessage={onWebViewMessage}
/>

  1. function onWebViewMessage
    回調存入 webViewHeight
  const [webViewHeight, setWebViewHeight] = React.useState(0);
  const onWebViewMessage = (event) => {
    setWebViewHeight(Number(event.nativeEvent.data));
  };
  1. 執行
   npm run ios

”這裡是一個標題“ 就會出現!!

結論

Day 19 done ~~~


上一篇
[ 卡卡 DAY 18 ] - React Native animated 來簡單使用 translate 效果
下一篇
[ 卡卡 DAY 20 ] - React Native icon 用 react-native-vector-icons
系列文
卡卡30天學 React Native31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言